<template>
  <div class="main_box">
    <CommonHeader title="重点关注任务"></CommonHeader>
    <div class="main_content">
      <div class="declare_title">
        <div class="title">批示标题：</div>

        <div class="state" :class="declareData.checkStatus == 0 ? 'red' : 'blue'">
          {{ formateState(declareData.checkStatus) }}
        </div>
      </div>

      <div class="declare_title" style="text-align: left">{{ declareData.title }}</div>

      <!-- <div class="declare_title" style="background: none">
        <div>提醒</div>
        <div class="state" :class="declareData.checkStatus == 0 ? 'red' : 'blue'">
          {{ formateState(declareData.checkStatus) }}
        </div>
      </div> -->
      <!-- <div class="form_content">{{ declareData.content }}</div> -->
      <div class="declare_title" style="text-align: left">提醒：</div>

      <div class="form_content">
        <!-- <div
          class="title"
          :style="{
            'font-size': '16px',
            'font-weight': 600,
            'line-height': '16px',
            color: '#000000',
            margin: '16px 0 12px 0',
          }">
          {{ declareData.title }}
        </div> -->
        <div class="container">{{ declareData.content }}</div>
      </div>
      <div class="form_title">下发附件</div>
      <div class="file_list" v-if="fileItem.annexName">
        <div class="file_item" @click="downloadFile(fileItem)">
          <i class="file_icon" :class="formateFileType(fileItem.annexName)"></i>
          <div class="content">{{ fileItem.annexName }}</div>
        </div>
      </div>
      <div v-else class="no_file">无下发附件</div>
      <div class="form_title" v-if="declareData.feedbackContent">反馈内容</div>
      <div class="form_content" v-if="declareData.feedbackContent">
        {{ declareData.feedbackContent }}
      </div>
      <!-- <div class="form_title">反馈附件</div>
      <div class="file_list" v-if="fileItem2.annexName">
        <div class="file_item" @click="downloadFile(fileItem2)">
          <i class="file_icon" :class="formateFileType(fileItem2.annexName)"></i>
          <div class="content">{{ fileItem2.annexName }}</div>
        </div>
      </div>
      <div v-else class="no_file">无反馈附件</div> -->
      <!-- 非无限层级 ╮(╯▽╰)╭ 时间紧 任务重 不想设计优化  一股脑堆了 -->
      <div style="margin-top: 20px">
        <!-- 一级 -->
        <div class="form_content" style="margin-top: 20px; border-radius: 8px" v-for="(firstItem, index) in taskInfo" :key="index">
          <div class="first-title" style="min-height: 53px; display: flex; align-items: center; justify-content: space-between">
            <div class="left" style="font-size: 16px">
              {{ firstItem.name }}
            </div>
            <div class="right" style="display: flex" v-if="firstItem.catalogType != 0">
              <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" v-if="firstItem.receiptDoList[0].dutyType == 1" />
              <!-- <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div> -->
              <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px; margin-left: 5px" v-else />
              <!-- <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div> -->
            </div>
          </div>
          <!-- 一级人员 -->
          <div class="first-person" v-if="firstItem.catalogType == 0 || !firstItem.childList">
            <!-- 绿牌统计 -->
            <!-- <div style="display: flex; margin: 12px 0 18px">
              <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" />
              <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div>
            </div> -->
            <!-- 绿牌人 -->
            <!-- <div style="width: 100%">
              <div class="th">
                <div class="td" style="width: 20%">姓名</div>
                <div class="td" style="width: 60%">职务</div>
                <div class="td" style="width: 20%">状态</div>
              </div>
              <div class="tbody" v-for="(person, i) in firstItem.receiptDoList.filter((v) => v.dutyType == 1)" :key="i">
                <div class="td" style="width: 20%">{{ person.empName }}</div>
                <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                <div
                  class="td"
                  style="width: 20%"
                  :style="{
                    color: person.checkStatus ? 'green' : 'red',
                  }">
                  {{ person.checkStatus ? '已查看' : '未查看' }}
                </div>
              </div>
            </div> -->
            <!-- 红牌统计 -->
            <!-- <div style="display: flex; margin: 12px 0 18px">
              <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px" />
              <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div>
            </div> -->
            <!-- 红牌人 -->
            <!-- <div style="width: 100%">
              <div class="th">
                <div class="td" style="width: 20%">姓名</div>
                <div class="td" style="width: 60%">职务</div>
                <div class="td" style="width: 20%">状态</div>
              </div>
              <div class="tbody" v-for="(person, i) in firstItem.receiptDoList.filter((v) => v.dutyType == 0)" :key="i">
                <div class="td" style="width: 20%">{{ person.empName }}</div>
                <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                <div
                  class="td"
                  style="width: 20%"
                  :style="{
                    color: person.checkStatus ? 'green' : 'red',
                  }">
                  {{ person.checkStatus ? '已查看' : '未查看' }}
                </div>
              </div>
            </div> -->
          </div>
          <!-- 二级 -->
          <div
            class="second-box"
            v-for="(secondItem, secondIndex) in firstItem.childList"
            :key="secondIndex"
            style="margin: 0 auto; padding: 10px; border-radius: 8px; background: #fafafa">
            <div class="second-title" style="font-size: 12px; color: #333; font-weight: 500; display: flex; justify-content: space-between">
              <div class="left">{{ secondItem.name }}</div>
              <div class="right" style="display: flex">
                <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" v-if="secondItem.receiptDoList[0].dutyType == 1" />
                <!-- <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div> -->
                <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px; margin-left: 5px" v-else />
                <!-- <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div> -->
              </div>
            </div>
            <!-- 二级人员 -->
            <div class="second-person">
              <!-- 绿牌统计 -->
              <!-- <div style="display: flex; margin: 12px 0 18px">
                <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" />
                <div style="margin-left: 5px">{{ secondItem.greenCount || 0 }}</div>
              </div> -->
              <!-- 绿牌人 -->
              <!-- <div style="width: 100%">
                <div class="th">
                  <div class="td" style="width: 20%">姓名</div>
                  <div class="td" style="width: 60%">职务</div>
                  <div class="td" style="width: 20%">状态</div>
                </div>
                <div class="tbody" v-for="(person, i) in secondItem.receiptDoList.filter((v) => v.dutyType == 1)" :key="i">
                  <div class="td" style="width: 20%">{{ person.empName }}</div>
                  <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                  <div
                    class="td"
                    style="width: 20%"
                    :style="{
                      color: person.checkStatus ? 'green' : 'red',
                    }">
                    {{ person.checkStatus ? '已查看' : '未查看' }}
                  </div>
                </div>
              </div> -->
              <!-- 红牌统计 -->
              <!-- <div style="display: flex; margin: 12px 0 18px">
                <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px" />
                <div style="margin-left: 5px">{{ secondItem.redCount || 0 }}</div>
              </div> -->
              <!-- 红牌人 -->
              <!-- <div style="width: 100%">
                <div class="th">
                  <div class="td" style="width: 20%">姓名</div>
                  <div class="td" style="width: 60%">职务</div>
                  <div class="td" style="width: 20%">状态</div>
                </div>
                <div class="tbody" v-for="(person, i) in secondItem.receiptDoList.filter((v) => v.dutyType == 0)" :key="i">
                  <div class="td" style="width: 20%">{{ person.empName }}</div>
                  <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                  <div
                    class="td"
                    style="width: 20%"
                    :style="{
                      color: person.checkStatus ? 'green' : 'red',
                    }">
                    {{ person.checkStatus ? '已查看' : '未查看' }}
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main_footer" v-if="declareData.feedbackStatus == 0 && $route.query.level != '2'">
      <van-button round type="info" @click="goForm">计划举措</van-button>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
export default {
  // eslint-disable-next-line
  name: 'feedbackDetail',
  components: {
    CommonHeader,
  },
  data() {
    return {
      fileItem: {},
      fileItem2: {},
      declareData: {
        title: '',
        state: '',
        content: '',
      },
      selectList: [
        {
          text: '待反馈',
          value: '0',
        },
        {
          text: '已反馈',
          value: '1',
        },
      ],
      taskInfo: [],
    };
  },
  computed: {
    formateState() {
      return function (state) {
        switch (state) {
          case '0':
            return '待查看';
          case 0:
            return '待查看';
          default:
            return '已查看';
        }
      };
    },
    formateFileType() {
      return function (fileName) {
        if (fileName) {
          const arr = fileName.split('.');
          const type = arr[arr.length - 1];
          if (type === 'docx' || type === 'doc') {
            return 'word';
          } else if (type === 'xlsx' || type === 'xls') {
            return 'word';
          } else if (type === 'pdf') {
            return 'pdf';
          } else {
            return '';
          }
        } else {
          return '';
        }
      };
    },
  },
  created() {
    this.getDetail();
  },
  methods: {
    downloadFile(item) {
      window.open(item.filePath, '_blank');
    },
    getTask() {
      const params = {
        id: this.declareData.id,
        empId: this.declareData.searchPerson || sessionStorage.getItem('employId'),
        loginEmpId: sessionStorage.getItem('employId'),
      };
      this.$api.lowLevelDutyDetail(params).then((res) => {
        if (res.status === 200) {
          this.taskInfo = res.data.list;
          this.declareData.checkStatus = res.data.checkStatus;
        }
      });
    },
    getDetail() {
      this.declareData = this.$route.query;
      console.log(this.declareData);
      this.fileItem = {
        annexName: this.declareData.annexName,
        filePath: this.declareData.annexPath,
      };
      this.getTask();
      //   const params = {
      //       _gp: "dutiesAdmin",
      //       _mt: "detail",
      //       dutyId: this.$route.query.id,
      //   }
      //   this.$api.commonApi(params).then(res=>{
      //     if(res.errno === 200){
      //       this.declareData = res.data
      //       this.fileItem  = res.data.dutiesAnnexDO.filter(item=>{
      //         return item.fileFlag == 0
      //       })
      //       this.fileItem2  = res.data.dutiesAnnexDO.filter(item=>{
      //         return item.fileFlag == 1
      //       })
      //     }else{
      //       this.declareData = {}
      //       this.fileItem = {}
      //       this.fileItem2 = {}
      //     }
      //   })
    },
    goForm() {
      this.$router.push({
        path: '/feedbackForm',
        query: {
          ...this.declareData,
        },
      });
    },
  },
};
</script>

<style scoped>
.main_box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f4f5fa;
}
.main_content {
  padding: 15px;
}
.declare_title {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  font-size: 14px;
  background-color: #fff;
}
.declare_title .title {
  max-width: 75%;
  text-align: left;
}
.declare_title .state {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  background-color: #7f7f7f;
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
}
.declare_title .state.red {
  background-color: #f60e36;
}
.declare_title .state.blue {
  background-color: #4ca5f1;
}
.form_title {
  width: 100%;
  text-align: left;
  padding: 10px 0;
  font-size: 16px;
  color: #333;
}
.form_content {
  width: 100%;
  min-height: 80px;
  text-align: left;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  box-sizing: border-box;
}
.file_list .file_item {
  display: flex;
  font-size: 14px;
  color: #2a81e6;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
}
.file_list .file_item .content {
  width: calc(100% - 60px);
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_list .file_item .file_icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url('../../assets/image/file.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.file_list .file_item .file_icon.pdf {
  background: url('../../assets/image/Pdf.png') no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .file_icon.word {
  background: url('../../assets/image/word.png') no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .file_icon.excel {
  background: url('../../assets/image/excel.png') no-repeat;
  background-size: 100% 100%;
}
.no_file {
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  box-sizing: border-box;
}
.main_footer {
  width: 100%;
  height: 50px;
  font-size: 16px;
  position: fixed;
  left: 0;
  bottom: 0;
}
.main_footer >>> .van-button {
  width: 90%;
}
</style>